<template>
  <v-content style="bottom:0.50rem;" v-vuet-scroll="{ path: 'relationlink', name: 'content' }">
    <v-miaoScroll  :on-refresh="data.onRefresh" :on-getmore="data.onGetmore"
                  :has-next="data.has_next"
                  :showview="data.showview" v-vuet-scroll="{ path: 'relationlink', name: 'content' }">
      <div class="mw-column-center-style" v-for="(item,index) in data.list" style="width:3.75rem;align-items: center">
        <div v-if="item.feed_type == 'article'" @click="data.skipToArticle(item.feed_data.article.id)"
             class="mw-column-style" style="width: 3.45rem;padding:0.15rem;">
          <v-userpageenter :feed="item"></v-userpageenter>
          <div class="mw-column-style" style="margin-left:0.52rem;width: 2.93rem">
            <div class="mw-column-style"
                 style="position:relative;width: 100%;height:1.47rem;justify-content: space-between;margin-bottom:0.13rem;">
              <img :src="item.feed_data.article.cover_image"
                   style="position:absolute;left:0;top:0;width: 100%;height:100%;object-fit: cover"/>
              <div
                style="width:0.28rem;height:0.16rem;text-align:center;line-height:0.16rem;font-size:0.1rem;color:#ffffff;background-color: #000000;opacity: 0.8;margin-left:0.1rem;margin-top:0.1rem">
                文章
              </div>
              <div class="mw-row-style"
                   style="z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);width: 100%;padding:0.08rem 0;justify-content: center">
                <div class="mw-n-line"
                     style="width: 2.73rem;color: #FFFFFF;font-size: 0.15rem;font-weight: bold;line-height: 1.5">
                  {{item.feed_data.article.title}}
                </div>
              </div>
            </div>
            <div class="mw-row-style" style="align-items: center">
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     src="/static/comment_show.png"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.article.comments_total < 10000 ? item.feed_data.article.comments_total : (Math.floor(item.feed_data.article.comments_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img @click.stop="data.likeArticle(item)"
                     style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     :src="item.feed_data.article.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.article.likes_total < 10000 ? item.feed_data.article.likes_total : (Math.floor(item.feed_data.article.likes_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.feed_type == 'discount'" @click="data.skipToDiscount(item.feed_data.discount.id)"
             class="mw-column-style" style="width: 3.45rem;padding:0.15rem;">
          <v-userpageenter :feed="item"></v-userpageenter>
          <div class="mw-row-spacebetween-style" style="margin-left:0.52rem;width: 2.93rem">
            <img style="border-radius: 0.04rem;object-fit:cover;height:0.9rem;width:0.9rem"
                 :src="item.feed_data.discount.image"></img>
            <div class="mw-column-style" style="height:0.9rem;width:1.93rem;justify-content: space-between">
              <div class="mw-first-text-color mw-n-line" style="font-size:0.13rem;line-height:1.5;font-weight: bold">
                {{item.feed_data.discount.title}}
              </div>
              <div class="mw-row-spacebetween-style"
                   style=";width:100%;align-items: center;height:0.34rem;font-size: 0.11rem;">
                <div class="mw-column-style" style="height:100%;justify-content: space-around">
                  <div class="mw-row-style" style="align-items: center">
                    <div class="mw-row-style mw-main-red" style="font-weight: bold;align-items: baseline">
                      <div style="font-size: 0.1rem">￥</div>
                      <div style="font-size: 0.18rem">{{item.feed_data.discount.price}}</div>
                    </div>
                    <div v-if="item.feed_data.discount.coupon_amount != 0" class="mw-column-center-style" style="margin-left:0.04rem;justify-content:center;font-size:0.1rem;color:#ffffff;padding:0 0.1rem;height:0.14rem;background-image: url(/static/coupon_icon.png);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
">{{item.feed_data.discount.coupon_amount}}元券
                    </div>
                  </div>

                  <div class="mw-row-style mw-third-text-color" style="font-size: 0.11rem">
                    <div style="margin-right:0.04rem">{{item.feed_data.discount.platform}}</div>
                    <div style="text-decoration:line-through">￥{{item.feed_data.discount.original_price}}</div>
                  </div>
                </div>
                <div @click.stop="data.sendClickBuy(item.feed_data.discount)"
                     style="text-align: center;height:0.28rem;width: 0.56rem;line-height: 0.28rem;border-radius: 0.14rem;background-color: #FFCF0F;font-size:0.13rem;color:#262420">
                  去抢
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.feed_type == 'note'" @click="data.skipToNote(item.feed_data.note.id)"
             class="mw-column-style" style="width: 3.45rem;padding:0.15rem;">
          <v-userpageenter :feed="item"></v-userpageenter>
          <div v-if="item.feed_data.note.is_video == 0" class="mw-column-style" style="margin-left:0.52rem;width: 2.93rem">
            <div class="mw-column-style"
                 style="width: 100%;margin-bottom:0.13rem;">
              <div v-if="item.feed_data.note.images.length != 0"
                   style="width: 100%;display: flex;flex-flow:row wrap;align-items:center;margin-bottom:0.1rem;">
                <div v-for="(imageitem,imageindex) in item.feed_data.note.images">
                  <img v-if="item.feed_data.note.images.length == 1"
                       style="width: 100%;height:2.93rem;object-fit: cover" :src="imageitem.image_url"/>
                  <img v-else-if="item.feed_data.note.images.length == 2"
                       style="margin-right:0.04rem;margin-bottom:0.04rem;width:1.42rem;height:1.42rem;object-fit: cover"
                       :src="imageitem.image_url"/>
                  <img v-else-if="item.feed_data.note.images.length == 4"
                       style="margin-right:0.04rem;margin-bottom:0.04rem;width:1rem;height:1rem;object-fit: cover"
                       :src="imageitem.image_url"/>
                  <img v-else-if="item.feed_data.note.images.length >= 3"
                       style="margin-right:0.04rem;margin-bottom:0.04rem;width:0.93rem;height:0.93rem;object-fit: cover"
                       :src="imageitem.image_url"/>
                </div>
              </div>


              <div class="mw-n-line mw-first-text-color" style="font-size: 0.17rem;line-height: 1.5;font-weight: bold">
                {{item.feed_data.note.title}}
              </div>
              <div class="mw-n-line mw-first-text-color"
                   style="-webkit-line-clamp: 3;font-size: 0.13rem;line-height: 1.4">{{item.feed_data.note.description}}
              </div>
            </div>
            <div class="mw-row-style" style="align-items: center">
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     src="/static/comment_show.png"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.note.comments_total < 10000 ? item.feed_data.note.comments_total : (Math.floor(item.feed_data.note.comments_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img @click.stop="data.likeNote(item)"
                     style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     :src="item.feed_data.note.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.note.liked_total < 10000 ? item.feed_data.note.liked_total : (Math.floor(item.feed_data.note.liked_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
            </div>
          </div>
          <div v-else class="mw-column-style" style="margin-left:0.52rem;width: 2.93rem">
            <div class="mw-column-style"
                 style="position:relative;width: 100%;height:3.45rem;justify-content: center;align-items:center;margin-bottom:0.13rem;">
              <img :src="item.feed_data.note.cover_url"
                   style="position:absolute;left:0;top:0;width: 100%;height:100%;object-fit: cover"/>
              <img src="/static/relation_note_video.png" style="height:0.6rem;width: 0.6rem;object-fit: cover;z-index: 2"/>
              <div class="mw-row-style"
                   style="position:absolute;left:0;bottom:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);width: 100%;padding:0.08rem 0;justify-content: center">
                <div class="mw-n-line"
                     style="width: 2.73rem;color: #FFFFFF;font-size: 0.15rem;font-weight: bold;line-height: 1.5">
                  {{item.feed_data.note.title}}
                </div>
              </div>
            </div>
            <div class="mw-row-style" style="align-items: center">
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     src="/static/comment_show.png"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.note.comments_total < 10000 ? item.feed_data.note.comments_total : (Math.floor(item.feed_data.note.comments_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
              <div class="mw-row-style" style="align-items: center;width: 0.7rem;">
                <img @click.stop="data.likeNote(item)"
                     style="height:0.24rem;width:0.24rem;object-fit:cover;margin-right:0.04rem"
                     :src="item.feed_data.note.liked == 1 ? '/static/article_zan.png':'/static/article_unzan.png'"/>
                <div class="mw-second-text-color" style="font-size: 0.1rem;">
                  {{item.feed_data.note.liked_total < 10000 ? item.feed_data.note.liked_total : (Math.floor(item.feed_data.note.liked_total / 10000 * 10) / 10 + 'w')}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="width:3.75rem;height:1px;box-shadow:0px 0px 0px 0px rgba(235,235,235,1);background-color: #EBEBEB"></div>
      </div>

      <div v-show="data.showview && (data.userlist.length != 0)" class="mw-column-style" >
        <div v-show="data.list.length == 0" class="mw-column-center-style" style="width: 3.75rem;height:1.24rem;justify-content: center">
          <div class="mw-column-center-style">
            <div class="mw-first-text-color" style="font-size: 0.17rem;font-weight:bold;margin-bottom: 0.04rem">你还没有关注任何人</div>
            <div class="mw-third-text-color" style="font-size: 0.13rem;margin-bottom: 0.1rem">关注后可以在这里看到对方的最新动态！</div>
            <div @click="data.onInit" class="mw-row-style" style="border:1px solid rgba(51,51,51,1);height:0.28rem;border-radius:0.14rem;align-items: center;padding:0 0.09rem;">
              <img style="height:0.12rem;width: 0.12rem;margin-right: 0.02rem" src="/static/get_feeds.png"/>
              <div class="mw-first-text-color" style="font-size: 0.11rem">刷新动态</div>
            </div>
          </div>
        </div>
        <div class="mw-column-style" style="width: 3.75rem;">
          <div class="mw-horizon-divider" style="width: 100%">
          </div>
          <div class="mw-row-spacebetween-style" style="align-items: center;width: 3.55rem;height:0.4rem;padding:0.1rem">
            <div class="mw-first-text-color" style="font-size: 0.13rem;font-weight: bold">推荐关注</div>
            <div @click="data.geCommendUserList(true)" class="mw-row-style" style="align-items: center">
              <img style="height:0.12rem;width: 0.12rem;margin-right: 0.02rem" src="/static/change_user_list.png"/>
              <div class="mw-third-text-color" style="font-size:0.13rem">换一批</div>
            </div>
          </div>
          <div
            style="display: flex;flex-flow:row wrap;align-items:center;justify-content: space-between;width: 3.55rem;padding:0.1rem">
            <div @click="data.skipToUserpage(item.id)" v-for="(item,index) in data.userlist"
                 style="height:2.17rem;width: 1.73rem;margin-bottom:0.06rem;background:rgba(255,255,255,1);box-shadow:0 0.04rem 0.1rem 0 rgba(0,0,0,0.04);border-radius:0.04rem;border:1px solid rgba(222,222,222,1);"
                 class="mw-main-background-white mw-column-center-style">
              <img :src="item.avatar == ''? '/static/defalut_avatar.png':item.avatar"
                   style="height:0.76rem;width: 0.76rem;border-radius: 0.38rem;object-fit: cover;margin-top:0.1rem;margin-bottom: 0.06rem"/>
              <div class="mw-single-line mw-first-text-color"
                   style="font-weight: bold;font-size: 0.15rem;width:1.53rem;text-align: center ">{{item.name}}
              </div>
              <div class="mw-third-text-color mw-n-line"
                   style="text-align:center;font-size:0.11rem;height:0.32rem;width: 1.53rem;margin-bottom:0.04rem;">
                {{item.introduce}}
              </div>
              <div class="mw-row-style" style="font-size:0.13rem;margin-bottom: 0.08rem">
                <div class="mw-first-text-color" style="font-weight: bold">
                  {{item.fans_total < 10000 ? item.fans_total : (Math.floor(item.fans_total / 10000 * 10) / 10 + 'w')}}
                </div>
                <div class="mw-third-text-color">粉丝</div>
                <div class="mw-first-text-color" style="font-weight: bold">
                  ·{{item.notes_total < 10000 ? item.notes_total : (Math.floor(item.notes_total / 10000 * 10) / 10 + 'w')}}
                </div>
                <div class="mw-third-text-color">笔记</div>
              </div>
              <div>
                <div @click.stop="data.follow(item)" v-if="item.followed == 1" class="mw-focus-recbutton-style">已关注</div>
                <div @click.stop="data.follow(item)" v-else-if="item.followed == 0" class="mw-unfocus-recbutton-style">关注
                </div>
                <div @click.stop="data.follow(item)" v-else-if="item.followed == 2" class="mw-focuseach-recbutton-style">
                  互相关注
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>

    </v-miaoScroll>



  </v-content>

</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import utils from '../../utils'

  export default {
    mixins: [
      mapModules({data: 'relationlink'}),
      mapRules({store: [{path: 'relationlink'}], once: [{path: 'relationlink'}]})
    ],
    mounted() {
      this.data.needFetch = true
    },
    methods: {
//      skipToNote(id){
//        this.data.needFetch = false
//        this.$router.push({name: 'notedetail', query: {id: id}})
//      },
//      skipToUserPage(id){
//        this.data.needFetch = false
//        this.$router.push({name: 'userpage', query: {id: id}})
//      },
      skipToSearch() {
        this.data.needFetch = false
        this.$router.push({name: 'search'})
      },
      skipToSale() {
        this.data.needFetch = false
        this.$router.push({name: 'sale'})
      },
      skipToArticle() {
        this.data.needFetch = false
        this.$router.push({name: 'articlechannel', query: {id: 1}})
      },
    },
    data() {
      return {}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>


</style>
